﻿@model ShopKart.Areas.Admin.Models.ProductVm

<script src="~/Content/Template/assets/admin/pages/scripts/jquery.form.js"></script>

<style type="text/css">
    .btn-file {
        margin: 9px 0px 0px 33px;
        position: relative;
        overflow: hidden;
        border-radius: 10px !important;
        padding: 6px 30px 6px 30px;
    }

        .btn-file input[type=file] {
            position: absolute;
            top: 0;
            right: 0;
            min-width: 100%;
            min-height: 100%;
            font-size: 100px;
            text-align: right;
            filter: alpha(opacity=0);
            opacity: 0;
            outline: none;
            background: white;
            cursor: inherit;
            display: block;
        }
</style>

@using (Html.BeginForm("AddUpdateProduct", "Product", new { area = "Admin" }, FormMethod.Post, new { @id = "productUploadForm", @class = "horizontal-form", enctype = "multipart/form-data" }))
{
    <div class="modal-body">
        @Html.Partial("~/Views/Shared/_ShowMessage.cshtml")

        @Html.HiddenFor(x => x.ProductId)
        @Html.HiddenFor(x => x.Image)

        <div class="form-body">
            <div class="row">
                <div class="col-md-4 col-md-offset-4">
                    <div class="form-group">
                        <img id="productImage" class="img-circle img-responsive" src="/Content/Images/ShopKart/dummy-img.jpg" style="height: 200px;">
                        <span class="btn btn-primary btn-file">
                            Browse @Html.TextBoxFor(x => x.ProductImage, new { @type = "file", @id = "productImageUploader" })
                        </span>

                    </div>
                </div>
                <!--/span-->
            </div>
            <div class="row">
                <div class="col-md-6">
                    <div class="form-group">
                        @Html.LabelFor(x => x.ProductName, new { @class = "control-label" })
                        @Html.TextBoxFor(x => x.ProductName, new { @class = "form-control", placeholder = "Enter Product Name" })
                        <span class="help-block">@Html.ValidationMessageFor(x => x.ProductName)</span>
                    </div>
                </div>
                <!--/span-->
                <div class="col-md-6">
                    <div class="form-group">
                        @Html.LabelFor(x => x.CategoryId, new { @class = "control-label" })
                        @Html.DropDownListFor(x => x.CategoryId, new SelectList(Model.Categories, "CategoryId", "CategoryName"), "--Select--", new { @id = "ddlCategory", @class = "form-control", data_placeholder = "Select Category..." })
                    </div>
                </div>
                <!--/span-->
            </div>
            <div class="row">
                <div class="col-md-12">
                    <div class="form-group">
                        @Html.LabelFor(x => x.Description, new { @class = "control-label" })
                        @Html.TextAreaFor(x => x.Description, new { @class = "form-control", placeholder = "Enter Description" })
                    </div>
                </div>
                <!--/span-->
            </div>
            <div class="row">
                <div class="col-md-6">
                    <div class="form-group">
                        @Html.LabelFor(x => x.Weight, new { @class = "control-label" })
                        @Html.TextBoxFor(x => x.Weight, new { @class = "form-control", placeholder = "Enter Product Weight" })
                    </div>
                </div>
                <!--/span-->
                <div class="col-md-6">
                    <div class="form-group">
                        @Html.LabelFor(x => x.Price, new { @class = "control-label" })
                        @Html.TextBoxFor(x => x.Price, new { @class = "form-control", placeholder = "Enter Product Price" })
                    </div>
                </div>
                <!--/span-->
            </div>
        </div>
    </div>
    <div class="modal-footer">
        <button type="button" data-dismiss="modal" class="btn default">Close</button>
        @*<button type="submit" class="btn green btnSaveProduct">Save</button>*@

        <button type="submit" class="btn green btnSaveProduct ladda-button formSaveButton" data-style="zoom-in">
            <span class="ladda-label">Save</span>
        </button>
    </div>
}

<script type="text/javascript">
    $(function () {
        $('#productUploadForm').ajaxForm({
            //beforeSubmit: validate,
            success: SubmitSuccesful,
            error: AjaxError
        });
    });


    function AjaxError() {
        alert("Some error occured.");
    }

    function SubmitSuccesful(responseText, statusText) {
        //Inject data in modal
        $("#AddProduct .modal-body-footer").html(responseText);
        //Show toastr success message and close popup
        UIToastr.ShowSuccessToaster($("#messageType", "#AddProduct").val(), $("#validationMessage", "#AddProduct").val(), "", "#AddProduct");
        //Rebind Grid
        loadProductPortlet();
    }

    function ShowRequest(formData, jqForm, options) {
        var queryString = $.param(formData);
        alert('BeforeSend method: \n\nAbout to submit: \n\n' + queryString);
        return true;
    }

</script>
